<template>
  <h1>Vue3 组件</h1>
  <div>1. <strong>Props 自定义属性</strong></div>
  <MyPropComponent
      msg="Define Props"
      :counter="counter"
  />
  <button @click="addCounter">counter++</button>
  <hr>
  <div>2. <strong>Emit 自定义事件</strong></div>
  <MyEmitComponent @onUserinfo="getUserinfo"/>
</template>

<script setup>
import MyPropComponent from '../components/vue3/MyPropComponent'
import MyEmitComponent from '@/components/vue3/MyEmitComponent'
import { ref } from 'vue'

const counter = ref(0)
const addCounter = () => {
  counter.value++
}

const getUserinfo = (info) => {
  console.log('getUserinfo')
  console.log(info.value)
  console.log('username:', info.value.username)
  console.log('password:', info.value.password)
}
</script>